<template>
  <div class="user-container">
    <!-- 头部 -->
    <div class="user-header">
      <van-nav-bar
          :fixed="true"
          @click-left="onClickLeftHeader"
          @click-right="onClickRightHeader">
        <van-icon name="scan" slot="left"  size="25" color="#000000" />
        <van-icon name="setting-o" slot="right"  size="25" color="#000000" />
      </van-nav-bar>
    </div>

    <!-- 用户基本信息面板 -->
    <div class="user-card">
      <!-- 用户头像、姓名 -->
      <van-cell>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #icon>
          <img src="../../assets/caoshen.jpg" alt="" class="avatar"/>
        </template>
        <template #title>
          <span class="username">{{ userinfo }}</span>
        </template>
      </van-cell>

      <!-- 动态、关注、粉丝 -->
      <div class="user-data">
        <div class="user-data-item">
          <span>{{ dynamic }}</span>
          <span>动态</span>
        </div>
        <div class="user-data-item">
          <span>{{ finish }}</span>
          <span>已回答问题</span>
        </div>
        <div class="user-data-item">
          <span>{{ about }}</span>
          <span>关注</span>
        </div>
        <div class="user-data-item">
          <span>{{ fan }}</span>
          <span>粉丝</span>
        </div>
      </div>
    </div>

    <!-- 订单导航 -->
    <div class="user-indent">
      <van-nav-bar
          left-text="我的订单"
          right-text="查看全部"
          @click-right="onClickRightIndent"
      />
      <van-grid column-num="5" icon-size="20px">
        <van-grid-item icon="pending-payment" text="待付款" />
        <van-grid-item icon="guide-o" text="待分享" />
        <van-grid-item icon="clock-o" text="待发货" />
        <van-grid-item icon="shopping-cart-o" text="待收货" />
        <van-grid-item icon="star-o" text="评价" />
      </van-grid>
    </div>

    <!-- 我的学习 -->
    <div class="user-learn">
      &nbsp&nbsp<span style="font-weight:bold">我的学习</span>
      <van-grid column-num="4" icon-size="20px">
        <van-grid-item icon="gem-o" text="问题" />
        <van-grid-item icon="bag-o" text="已参与问题" />
        <van-grid-item icon="points" text="技能树" />
        <van-grid-item icon="edit" text="比赛" />
        <van-grid-item icon="flag-o" text="成就" />
        <van-grid-item icon="tv-o" text="课程" />
        <van-grid-item icon="description" text="专栏" />
        <van-grid-item icon="records" text="学习" />
      </van-grid>
    </div>

    <!-- 创作中心 -->
    <div class="user-creation">
      &nbsp&nbsp<span style="font-weight:bold">创作中心</span>
      <van-grid column-num="4" icon-size="20px">
        <van-grid-item icon="newspaper-o" text="内容管理" />
        <van-grid-item icon="chart-trending-o" text="粉丝数据" />
        <van-grid-item icon="bar-chart-o" text="内容数据" />
        <van-grid-item icon="balance-pay" text="收益明细" />
      </van-grid>

    </div>


  </div>
</template>

<script>
import { Toast } from 'vant';

export default {
  name: "User",
  data(){
    return{
      userinfo:'稻妻第一深情',
      dynamic: 10,
      finish: 2,
      about: 864,
      fan: 10+'w',
    }
  },
  methods:{
    onClickLeftHeader(){

    },
    onClickRightHeader(){
      this.$router.push('/set')
    },
    onClickRightIndent(){

    },
  }
}
</script>

<style lang="less" scoped>
.user-container {
  // 解决头部底部置顶置底遮住元素的问题
  padding: 46px 0 50px 0;
  /*头部*/
  .user-header{
    .van-nav-bar{
      //background: -webkit-linear-gradient(left,#151078, #319572,#2D9EBD);
      background: -webkit-linear-gradient(left, #FAEFF7,#EAE9FB,#E5F3FC);
    }
  }
  /*用户基本信息面板*/
  .user-card {
    background: -webkit-linear-gradient(left, #FAEFF7,#EAE9FB,#E5F3FC);
    color: #000000;
    padding-top: 20px;

    .van-cell {
      background: -webkit-linear-gradient(left, #FAEFF7,#EAE9FB,#E5F3FC);
      color: #000000;

      &::after {
        display: none;
      }

      .avatar {
        width: 60px;
        height: 60px;
        background-color: #ffffff;
        border-radius: 50%;
        margin-right: 10px;
      }

      .username {
        font-size: 20px;
        font-weight: bold;
      }
    }
  }
  .user-data {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 14px;
    padding: 30px 0;

    .user-data-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 33.33%;
    }
  }
  /*订单导航*/
  .user-indent{
    /deep/ .van-nav-bar__text {
      color: black;
      font-weight:bold;
      font-size:  0.6rem;
    }
  }




}

</style>